<template>
  <div class="wrap">
    <div class="parent">
      <div class="child">
        <line-stack
          name="device"
          :data="countDevice"
          :extend="{ title: 'App下载量', smooth: true }"
        />
      </div>
      <div class="child">
        <div class="parent">
          <div class="child">
            <pie-simple
              name="suggest"
              :data="countSuggest"
              :extend="{
                title: '热门栏目',
                radius: ['0%', '60%'],
              }"
            />
          </div>
          <div class="child">
            <pie-simple
              name="system"
              :data="countSystem"
              :extend="{ title: '热门系统', radius: ['0%', '60%'] }"
            />
          </div>
        </div>
      </div>
    </div>
    <bar-gradient
      style="margin-top: 20px"
      name="portalVisit"
      :data="portalVisit"
      :extend="{ title: '平台用户访问量', label: true }"
    />
  </div>
</template>
<script>
import lineStack from '@c/echarts/line-stack'
import pieSimple from '@c/echarts/pie-simple'
import barGradient from '@c/echarts/bar-gradient'
export default {
  components: {
    lineStack,
    pieSimple,
    barGradient,
  },
  data() {
    return {
      countDevice: {
        categories: [],
        series: [],
      },
      countSuggest: [],
      countSystem: [],
      portalVisit: {
        categories: [],
        series: [],
      },
    }
  },
  created() {
    this.countDeviceList()
    this.countSuggestList()
    this.countSystemList()
    this.portalVisitList()
  },
  methods: {
    countDeviceList() {
      //设备
      this.$axios.get('/count/bigscreent1/countDevice?limit=7').then((data) => {
        this.countDevice = { categories: [], series: [] }
        if (data.code == 200) {
          this.countDevice = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countSuggestList() {
      //热门栏目
      this.$axios.get('/count/bigscreent1/countSuggest').then((data) => {
        this.countSuggest = []
        if (data.code == 200) {
          this.countSuggest = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countSystemList() {
      //热门系统
      this.$axios.get('/count/bigscreent1/countSystem').then((data) => {
        this.countSystem = []
        if (data.code == 200) {
          this.countSystem = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    portalVisitList() {
      //平台用户访问量
      this.$axios.get('/count/bigscreent1/countPortalVisit').then((data) => {
        this.portalVisit = { categories: [], series: [] }
        if (data.code == 200) {
          const categories = [],
            series = []
          data.data.forEach((element) => {
            categories.push(element.name)
            series.push(element.value)
          })
          this.portalVisit = {
            categories: categories,
            series: [
              {
                name: '平台用户访问量',
                data: series,
              },
            ],
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.parent {
  display: flex;
  .child {
    width: 50%;
  }
}
</style>
